<script setup lang="ts">
// 订单数据
const orderInfo = {
  address: {
    detail: '沈阳市浑南区智慧四街1-121号',
    contact: '莫先生 15564959562'
  },
  shop: {
    name: '万家饺子（软件园E18店）',
    items: [
      { name: '纯肉鲜肉（水饺）', quantity: 2, price: 15 },
      { name: '玉米鲜肉（水饺）', quantity: 1, price: 16 }
    ]
  },
  deliveryFee: 3,
  totalAmount: 49
}
</script>

<template>
  <!-- 顶部标题栏 -->
  <div class="bg-blue-4 h-7% w-full flex justify-center items-center fixed top-0 left-0 z-1000">
    <h1 class="text-center text-1.5xl color-white">确认订单</h1>
  </div>

  <!-- 主要内容区域 -->
  <div class="mt-[8%] px-4">
    <!-- 配送地址 -->
    <div class="bg-blue-4 p-4 rounded mb-3 mt-15">
      <div class="text-gray-500">订单配送至:</div>
      <div class="text-lg font-bold">{{ orderInfo.address.detail }}</div>
      <div>{{ orderInfo.address.contact }}</div>
    </div>

    <!-- 商品列表 -->
    <div class="bg-white p-4 rounded mb-3">
      <div class="font-bold mb-3">{{ orderInfo.shop.name }}</div>
      <div v-for="item in orderInfo.shop.items" :key="item.name" class="flex justify-between py-2">
        <div class="flex items-center">
          <img src="@/assets/image/sp04.png" class="w-12 h-12 rounded mr-2" />
          <div>
            <div>{{ item.name }}</div>
            <div class="text-gray-500">x {{ item.quantity }}</div>
          </div>
        </div>
        <div>¥{{ item.price }}</div>
      </div>
      <div class="flex justify-between mt-3 pt-3 border-t">
        <span>配送费</span>
        <span>¥{{ orderInfo.deliveryFee }}</span>
      </div>
    </div>
  </div>

  <!-- 底部支付栏 -->
  <div class="fixed bottom-0 left-0 right-0 flex">
    <div class="flex-1 bg-gray-700 text-white p-4 flex items-center justify-center">
      ¥{{ orderInfo.totalAmount }}
    </div>
    <div class="w-[40%] bg-green-500 text-white p-4 flex items-center justify-center" onclick="location.href='/payment'">
      去支付
    </div>
  </div>
</template>

<style scoped>
.rounded {
  border-radius: 8px;
}
</style>